<template>
	<view class="details">
		<u-row gutter="50">
			<u-col span="12">
				<u-form :model="projectInfo">
					<view class="content">
						<u-form-item label="工程名称" label-width="140">
							<u-input input-align="right" :disabled="true" class="u-form-right" v-model="projectInfo.projectName" />
						</u-form-item>
						<u-form-item label="工程地址" label-width="140">
							<u-input input-align="right"  :disabled="true" v-model="projectInfo.projectAddr" />
						</u-form-item>
						<u-form-item label="工程编号" label-width="140" class="num">
							<u-input input-align="right"  v-model="projectInfo.projectNo"  :disabled="true" class="u-form-right " />
							<view class="numBut">
								<u-button class="butCopu" @click="butCopu" type="primary" size="mini" plain>复制</u-button>
							</view>
						  
						</u-form-item>
						<u-form-item label="创建人" label-width="140">
							<u-input input-align="right" v-model="projectInfo.createUserName" />
						</u-form-item>
						<u-form-item label="手机号" label-width="140">
							<u-input input-align="right" :disabled="true"  v-model="projectInfo.createUserPhone" />
						</u-form-item>
						<u-form-item label="创建时间" label-width="140">
							<u-input input-align="right"  :disabled="true" v-model="projectInfo.createTime" />
						</u-form-item>
					</view>
				</u-form>
			</u-col>
			<view style="clear: both;"></view>
		</u-row>
		<view class="list">
			<u-row gutter="50">
				<u-col class="uCol" span="6" v-for="(item, index) of projectNameList" :key="index">
					<view class="box" @click="projectClick(item)">
						<view class="box-son u-flex">
							<image :src="item.dictImage" mode=""></image>
							<view class="name">{{ item.dictValue }}</view>
						</view>
					</view>
				</u-col>
				<u-col class="uCol" span="6">
					<view style="border-bottom: 0;" class="box u-flex" @click="buildClick(projectOtherNameList.id)">
						<view class="box-son u-flex">
							<image :src="projectOtherNameList.dictImage" mode=""></image>
							<view class="name">{{ projectOtherNameList.dictValue }}</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'projectDetails',
		data() {
			return {
				projectId: '', // 工程id
				projectInfo: {}, // 工程详情
				projectNameList: [], // 单位的图标和名字
				projectOtherNameList: {}// 单位的图标和名字
			}
		},
		onLoad(e) {
			this.projectId = e.idx
			if(this.projectId) {
				this.getProjectDetails() // 获取项目的详情数据
			}
		},
		created() {
			this.getCompanyList() // 获取单位图标及名称列表
			this.getOtherCompanyList() // 获取单位图标及名称列表
		},
		methods: {
			// 获取项目的详情数据
			getProjectDetails() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.post({
					url: `/project-info/detail/${this.projectId}`,
					header: header
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.projectInfo = res.data
						// 手机号中间四位隐藏
						this.projectInfo.createUserPhone = this.projectInfo.createUserPhone.replace(/^(.{3})(?:\d+)(.{4})$/,"$1****$2");
					}
				})
			},
			// 获取单位图标及名称列表
		  getCompanyList() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.get({
					url: '/blade-system/dict-biz/tenant/dictionary',
					header: header,
					data: {
						code: 'acceptance_type'
					}
				}).then(res => {
					// console.log(res)
					this.projectNameList = res.data
				})
			},
			// 获取其他单位图标及名称列表
			getOtherCompanyList() {
				let header = {
					"content-type":"application/x-www-form-urlencoded;charset=UTF-8"
				}
				this.$ajax.get({
					url: '/blade-system/dict-biz/tenant/dictionary',
					header: header,
					data: {
						code: 'detection_type'
					}
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.projectOtherNameList = res.data[0]
					}
					
				})
			},
			// 复制工程编号
			butCopu() {
				uni.setClipboardData({
				    data: this.projectInfo.projectNo,
				    success: function (e) {
				      // console.log(e);
				    },
						fail(e) {
							console.log(e)
						}
				})
			},
			// 点击单位跳转
			projectClick(item) {
				let dataList = {
					projectId: this.projectInfo.id,
					name: item.dictValue,
					acceptanceTypeId: item.id
				}
				this.$navJump.navigateTo('./selectUnit?idx=' + JSON.stringify(dataList))
			},
			// 点击跳转其他单位
			buildClick(id) {
				// console.log(id)
				let info = {
					detectionTypeId: id,
					projectId: this.projectInfo.id
				}
				this.$navJump.navigateTo('./buildAcceptance?infoList=' + JSON.stringify(info))
			}
		},
		// onShow() {
		// 	// 去除左上角小房子图标
		// 	wx.hideHomeButton()
		// }
	}
</script>

<style lang="scss" scoped>
	.details {
		padding-top: 24rpx;
		.content{
			background-color: #FFFFFF;
			padding: 0 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			/deep/.u-input__input {
				color: #8C8C8C;
			}
			.butCopu {
				float: right;
				display: inline-block;
			}
		}
		.list {
			background-color: #FEFEFE;
			border-radius: 10rpx;
			margin: 0 24rpx 24rpx;
			.uCol:nth-child(odd) .box {
				border-bottom: 2rpx solid #F5F5F5;
				border-right: 2rpx solid #F5F5F5;
				
			}
			.uCol:nth-child(even) .box {
				border-bottom: 2rpx solid #F5F5F5;
			}
			/deep/.u-col-6{
				padding: 0!important;
			}
			.box {
				padding: 40rpx 24rpx;
				.box-son {
					height: 114rpx;
					image {
						width: 88rpx;
						height: 100rpx;
						margin-right: 21rpx;
					}
					.name {
						flex: 1;
					}
				}
				
			}
		}
	}
	.num {
		/deep/.u-input {
			padding-right: 21%!important;
		}
	}
	.numBut {
		position: absolute;
		right: 0;
		top: 16%;
	}
</style>
